<template>
  <div class="mine">
    <TopNav />
    <Swiper :imgUrl="imgUrl" :ok="ok" />
    <div class="mine-choose">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="mine-choose-tab " :stretch='stretch'>
        <el-tab-pane  label="动 态 平 台" name="first">
          <div class="box">
             <div class="box-header">
               <div class="box-header-left">
                 <img src="../../../static/img/header_03.png" alt="图片加载失败" />
               </div>
               <div class="box-header-right">啊 宽</div>
             </div>
             <p class="desc">翻唱红人、串烧歌唱达人，翻唱红人、串烧歌唱达人，翻唱...</p>
             <div class="box-bigimg">
               <img src="../../../static/img/header_06.png" alt="" />
             </div>
             <div class="Like">
                <div class="lt">
                  <img src="../../../static/img/commend.png" alt="" />
                </div>
                <div class="dz">
                  <img src="../../../static/img/mine-index_collect.png" alt="" />
                </div>
             </div>
             <div class="box-header">
               <div class="box-header-left">
                 <img src="../../../static/img/header_09.png" alt="图片加载失败" />
               </div>
               <div class="box-header-right">啊 宽</div>
             </div>
          </div>
        </el-tab-pane>  
        <el-tab-pane  label="我 的 好 友" name="second">
         <div class="box">
             <div class="box-header">
               <div class="box-header-left">
                 <img src="../../../static/img/header_03.png" alt="图片加载失败" />
               </div>
               <div class="box-header-right">啊 刘</div>
             </div>
             <p class="desc">翻唱红人、串烧歌唱达人，翻唱红人、串烧歌唱达人，翻唱...</p>
             <div class="box-bigimg">
               <img src="../../../static/img/header_06.png" alt="" />
             </div>
             <div class="Like">
                <div class="lt">
                  <img src="../../../static/img/commend.png" alt="" />
                </div>
                <div class="dz">
                  <img src="../../../static/img/mine-index_collect.png" alt="" />
                </div>
             </div>
             <div class="box-header">
               <div class="box-header-left">
                 <img src="../../../static/img/header_09.png" alt="图片加载失败" />
               </div>
               <div class="box-header-right">啊 刘</div>
             </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script>
import TopNav from "../../components/TopNav"
import Swiper from "../../components/Swiper"
export default {
  name:"Mine",
  data(){
    return {
      imgUrl:[],
      ok:false,
      activeName: 'first',
      stretch:true
    }
  },
  components: {
    TopNav,
    Swiper
  },
  methods:{
      handleClick(tab, event) {
        console.log(tab, event);
      }
  },
  mounted(){
    this.$axios.get("http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php")
    .then(res=>{
        if(!res.data){return}
        this.ok=true
       console.log(res.data)
       this.imgUrl=res.data.banner
       console.log(this.imgUrl)
    })
    .catch(error=>{
      console.log(error)
    })
  }
}

</script>

<style lang="less" scoped>
.box{
  width: 710/100rem;
  margin:0 auto;
}
.box-header{
  width: 100%;
  height:100/100rem;
}
.box-header-left,.box-header-right{
  width: 100/100rem;
  height:100/100rem;
  line-height:100/100rem;
  float: left;
  font-size: 30/100rem;
  text-align:center;
}
.box-header-left img{
  width: 100%;
  height:100%;
}
.desc{
  width: 100%;
  height:40/100rem;
  line-height:40/100rem;
  font-size:0.22rem;
  text-indent:50/100rem;
  margin-bottom: 20/100rem;
}
.box-bigimg{
  width: 100%;
  height:350/100rem;
  img{
    width: 100%;
    height:100%;
  }
}
.Like{
  width: 100%;
  height:60/100rem;
  .lt,.dz{
    width: 60/100rem;
    height:60/100rem;
    line-height:60/100rem;
    float: right;
    margin-top: -10/100rem;
    img{
      width: 40/100rem;
      height:40/100rem;
      line-height:40/100rem;
    }
  }
  .lt{
    margin-left:10/100rem;

  }
}
</style>
